import React, { Component } from "react";
import { message, Modal, Button } from "antd";
import TradeContainer from "./TradeContainer";
import classnames from "classnames";

import "./c2c.css";

class C2c extends Component {
  state = {
    currentType: "buy",
    currentCoin: "",
    coinList: [],
    c2cTextPopup: ""
  };

  request = window.request;

  componentWillMount() {
    //获取币种列表
    this.request("/offline/coin/list", {
      method: "GET"
    }).then(json => {
      if (json.code === 10000000) {
        this.setState({
          coinList: json.data,
          currentCoin: json.data[0]
        });
      } else {
        message.error(json.msg);
      }
    });
  }

  closeModal = () => {
    this.setState({ c2cTextPopup: "" });
  };

  componentDidMount() {
    const c2cTextPopup = localStorage.getItem("c2cTextPopup");
    if (!c2cTextPopup) {
      localStorage.setItem("c2cTextPopup", "isShow");
      this.setState({
        c2cTextPopup: (
          <Modal
            visible={true}
            className="c2c-text-modal"
            footer={null}
            onCancel={() => {
              this.closeModal();
            }}
          >
            <div className="c2c-text-wrap">
              <h4>温馨提示</h4>
              <p>
                尊敬的UES用户：为了您的C2C交易可以快速到账，请在交易前仔细阅读以下注意事项：
              </p>
              <p>1. 所有会员必须绑定手机号才可以进行C2C交易；</p>
              <p>
                2.
                未实名认证的会员每次只能进行一笔C2C交易，已实名认证的会员最多只允许五笔C2C订单处于交易中（不包括已取消和卖方已确认到帐的订单）；
              </p>
              <p>
                3.
                请在下单后30分钟内完成付款，否则订单将自动取消，会员当天累计取消3笔订单，将限制当天C2C的所有交易；
              </p>
              <p>
                4. 禁止使用微信、支付宝、他人代付、ATM及柜台转账等往银行卡转账
              </p>
              <p>
                请使用本人绑定的银行卡通过手机银行或网银进行汇款，其他任何方式汇款都会造成延时处理；
              </p>
              <p>
                5.
                大于5万的付款，请务必将单笔金额拆分为5万以内分批转账，否则将延迟到账。
              </p>
              <p>
                6.
                请履行契约精神，勿尝试任何欺诈行为，一经查实，将永久性冻结账户。
              </p>
              <div className="c2c-text-btn">
                <Button type="primary" onClick={this.closeModal}>
                  我知道了
                </Button>
              </div>
            </div>
          </Modal>
        )
      });
    }
  }

  handleSwitch = ({ exType, coin }) => {
    const { currentType, currentCoin } = this.state;
    if (!(exType === currentType && coin === currentCoin)) {
      this.setState({ currentType: exType, currentCoin: coin });
    }
  };

  render() {
    const { localization } = this.props;
    const { currentType, currentCoin, coinList, c2cTextPopup } = this.state;
    return (
      <div className="content c2c">
        <div className="content-inner">
          <div className="side-bar">
            {["buy", "sell"].map((exType, index) => {
              return (
                <ul key={exType} className="nav-item">
                  <h2 className="nav-tit">
                    {exType === "buy" ? (
                      <i className="iconfont icon-mairu" />
                    ) : (
                      <i className="iconfont icon-maichu" />
                    )}
                    {exType === "buy"
                      ? localization["我要买入"]
                      : localization["我要卖出"]}
                  </h2>
                  {coinList &&
                    coinList.map((coin, index) => {
                      return (
                        <li
                          key={coin.coinId}
                          className={classnames({
                            "nav-link": true,
                            active:
                              exType === currentType && coin === currentCoin
                          })}
                          onClick={this.handleSwitch.bind(this, {
                            exType,
                            coin
                          })}
                        >
                          {coin.symbol}
                        </li>
                      );
                    })}
                </ul>
              );
            })}
          </div>
          {currentType &&
            currentCoin && (
              <TradeContainer
                exType={currentType}
                coin={currentCoin}
                localization={localization}
              />
            )}
        </div>
        {c2cTextPopup}
      </div>
    );
  }
}

export default C2c;
